<template>
  <div class="carShapeStatisticsWrap h100">
    <slot>
      <h4 class="carModellStatisticsItemTitle">车辆车型</h4>
    </slot>
    <div class="chartBox">
      <loading-state :echartShowStatus="echartShowStatus">
        <div id="shapeChartBox" ref="shapeChartBox" style="height:100%;"></div>
      </loading-state>
    </div>
  </div>
</template>
<script>
import lodash from 'lodash'
import { picOption } from '../config/chart'
import { mapState } from 'vuex'
export default {
  components: {
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.vehicle.queryParams
    })
  },
  data () {
    return {
      chartObj: null,
      chartOption: lodash.cloneDeep(picOption),
      echartShowStatus: -1
    }
  },
  mounted () {
    this.getCartData()
  },
  methods: {
    getCartData () {
      this.echartShowStatus = 1
      this.$store
        .dispatch('getVehicleModelReportData', { size: 7 })
        .then((res) => {
          const result = res.data.map((item) => {
            return {
              name: item.keyName,
              value: item.count,
              modelId: item.key
            }
          })
          if (result.length === 0) {
            this.echartShowStatus = 3
          } else {
            this.echartShowStatus = -1
          }
          if (result.length === 0) {
            return
          }
          this.chartOption.series[0].data = result
          this.initChartBox()
        })
        .catch((err) => {
          this.echartShowStatus = -1
          console.log(err, 'err')
        })
    },
    initChartBox () {
      const vm = this
      this.chartObj = this.$echarts.init(this.$refs.shapeChartBox)
      this.chartObj.setOption(this.chartOption)
      this.chartObj.on('click', (param) => {
        console.log(param, 'ssfs')
        vm.queryParams.modelIds = param.data.modelId
        vm.$emit('search')
      })
    },
    changeChart () {
      this.chartObj.resize()
    }
  }
}
</script>
<style scoped lang="less">
.carShapeStatisticsWrap {
  display: flex;
  flex-direction: column;
  .chartBox {
    flex:1 0 0;
  }
}
</style>
